<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 7.1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="650" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 1.5;
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper functions to draw components ---

        function drawResistor(x, y, width, height, label, labelPos = 'right') {
            ctx.strokeRect(x, y, width, height);
            ctx.fillStyle = 'black';
            if (labelPos === 'right') {
                ctx.textAlign = 'left';
                ctx.fillText(label, x + width + 5, y + height / 2);
            } else if (labelPos === 'top') {
                ctx.textAlign = 'center';
                ctx.fillText(label, x + width / 2, y - 10);
            }
        }

        function drawThermistor(x, y, width, height, label, labelPos = 'top') {
            // Draw resistor box
            ctx.strokeRect(x, y, width, height);
            
            // Draw diagonal line with T-bar
            ctx.beginPath();
            ctx.moveTo(x - 5, y + height + 5);
            ctx.lineTo(x + width + 5, y - 5);
            ctx.moveTo(x + width + 5, y - 5);
            ctx.lineTo(x + width - 2, y - 12); // T-bar part 1
            ctx.moveTo(x + width + 5, y - 5);
            ctx.lineTo(x + width + 12, y - 2); // T-bar part 2
            ctx.stroke();

            if (label) {
                 ctx.fillStyle = 'black';
                 if (labelPos === 'top') {
                    ctx.textAlign = 'center';
                    ctx.fillText(label, x + width / 2, y - 10);
                }
            }
        }

        function drawBattery(x, y, height, label) {
            const shortWidth = 20;
            const longWidth = 40;
            const gap = 12;

            ctx.beginPath();
            // Long plate (+)
            ctx.moveTo(x - longWidth / 2, y - gap);
            ctx.lineTo(x + longWidth / 2, y - gap);
            // Short plate (-)
            ctx.moveTo(x - shortWidth / 2, y + gap);
            ctx.lineTo(x + shortWidth / 2, y + gap);
            ctx.stroke();

            // Dashed line (as in original)
            ctx.beginPath();
            ctx.setLineDash([2, 3]);
            ctx.moveTo(x, y - gap);
            ctx.lineTo(x, y + gap);
            ctx.stroke();
            ctx.setLineDash([]); // Reset line dash

            ctx.fillStyle = 'black';
            ctx.textAlign = 'right';
            ctx.fillText(label, x - longWidth / 2 - 15, y);
        }

        function drawVoltmeter(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText('V', x, y);
        }

        function drawGround(x, y) {
            const w1 = 30, w2 = 20, w3 = 10;
            const gap = 5;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, y + gap);
            ctx.moveTo(x - w1 / 2, y + gap);
            ctx.lineTo(x + w1 / 2, y + gap);
            ctx.moveTo(x - w2 / 2, y + gap * 2);
            ctx.lineTo(x + w2 / 2, y + gap * 2);
            ctx.moveTo(x - w3 / 2, y + gap * 3);
            ctx.lineTo(x + w3 / 2, y + gap * 3);
            ctx.stroke();
        }

        // --- Main drawing logic ---
        
        const yGround = 400;
        
        // Ground line and symbol
        ctx.beginPath();
        ctx.moveTo(50, yGround);
        ctx.lineTo(600, yGround);
        ctx.stroke();
        drawGround(300, yGround);

        // Left side: Voltage source and divider
        const xBatt = 100;
        const xDivider = 200;
        const yTopWire = 80;
        const yNodeX = 250;

        // Battery and its connections
        ctx.beginPath();
        ctx.moveTo(xBatt, yGround);
        ctx.lineTo(xBatt, yTopWire);
        ctx.lineTo(xDivider, yTopWire);
        ctx.stroke();
        drawBattery(xBatt, 170, 40, '1.5 V');

        // Voltage divider resistors
        drawResistor(xDivider - 10, yTopWire, 20, 80, '1100 Ω');
        drawResistor(xDivider - 10, yNodeX, 20, 80, '400 Ω');
        
        // Wires for divider
        ctx.beginPath();
        ctx.moveTo(xDivider, yTopWire + 80);
        ctx.lineTo(xDivider, yNodeX);
        ctx.moveTo(xDivider, yNodeX + 80);
        ctx.lineTo(xDivider, yGround);
        ctx.stroke();

        // Node X
        ctx.beginPath();
        ctx.arc(xDivider, yNodeX, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.textAlign = 'center';
        ctx.fillText('X', xDivider + 15, yNodeX - 5);


        // Right side: Op-amp circuit
        const xOpAmpInput = 350;
        const yOpAmpInverting = 250;
        const yOpAmpNonInverting = 300;
        const xOpAmpTip = 480;

        // Input resistor R_in
        drawResistor(xDivider, yOpAmpInverting - 8, 80, 16, '96 kΩ', 'top');
        
        // Wire from R_in to op-amp
        ctx.beginPath();
        ctx.moveTo(xDivider + 80, yOpAmpInverting);
        ctx.lineTo(xOpAmpInput, yOpAmpInverting);
        ctx.stroke();
        
        // Connection dot before op-amp
        ctx.beginPath();
        ctx.arc(xDivider + 80, yOpAmpInverting, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Op-amp
        ctx.beginPath();
        const opAmpTopY = yOpAmpInverting - 30;
        const opAmpBottomY = yOpAmpNonInverting + 30;
        const opAmpCenterY = (opAmpTopY + opAmpBottomY) / 2;
        ctx.moveTo(xOpAmpInput, opAmpTopY);
        ctx.lineTo(xOpAmpInput, opAmpBottomY);
        ctx.lineTo(xOpAmpTip, opAmpCenterY);
        ctx.closePath();
        ctx.stroke();

        // Op-amp +/- symbols
        ctx.font = '20px Arial';
        ctx.fillText('-', xOpAmpInput + 15, yOpAmpInverting);
        ctx.fillText('+', xOpAmpInput + 15, yOpAmpNonInverting);
        ctx.font = '16px Arial';

        // Op-amp power supplies
        const xPwr = 415;
        ctx.beginPath();
        ctx.moveTo(xPwr, opAmpTopY + 15);
        ctx.lineTo(xPwr, opAmpTopY - 20);
        ctx.moveTo(xPwr, opAmpBottomY - 15);
        ctx.lineTo(xPwr, opAmpBottomY + 20);
        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.fillText('+5.0 V', xPwr, opAmpTopY - 30);
        ctx.fillText('–5.0 V', xPwr, opAmpBottomY + 30);

        // Non-inverting input to ground
        ctx.beginPath();
        ctx.moveTo(xOpAmpInput, yOpAmpNonInverting);
        ctx.lineTo(300, yOpAmpNonInverting);
        ctx.lineTo(300, yGround);
        ctx.stroke();
        
        // Connection dot on ground line
        ctx.beginPath();
        ctx.arc(300, yGround, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Feedback loop
        const xFeedback = 320;
        const yFeedback = 120;
        const xOutputNode = 550;
        
        ctx.beginPath();
        ctx.moveTo(xOpAmpTip, opAmpCenterY);
        ctx.lineTo(xOutputNode, opAmpCenterY); // Output wire
        ctx.lineTo(xOutputNode, yFeedback); // Up
        ctx.lineTo(xFeedback, yFeedback); // Left
        ctx.lineTo(xFeedback, yOpAmpInverting); // Down
        ctx.lineTo(xDivider + 80, yOpAmpInverting); // To input junction
        ctx.stroke();
        
        // Feedback resistors
        const xThermistorStart = xFeedback + 40;
        const xResistorStart = xThermistorStart + 100;
        drawThermistor(xThermistorStart, yFeedback - 8, 80, 16, null);
        drawResistor(xResistorStart, yFeedback - 8, 80, 16, '100 kΩ', 'top');

        // Voltmeter
        const xVoltmeter = 550;
        const yVoltmeter = 350;
        ctx.beginPath();
        ctx.moveTo(xOutputNode, opAmpCenterY);
        ctx.lineTo(xVoltmeter, yVoltmeter - 20);
        ctx.moveTo(xVoltmeter, yVoltmeter + 20);
        ctx.lineTo(xVoltmeter, yGround);
        ctx.stroke();
        drawVoltmeter(xVoltmeter, yVoltmeter, 20);
        
        // Connection dots on output line
        ctx.beginPath();
        ctx.arc(xOutputNode, opAmpCenterY, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Final Fig Label
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 7.1', canvas.width / 2, 440);

    </script>
</body>
</html>